<template>
    <el-card>
        <!--条件查询开始-->
        <el-form ref="queryParams" :model="queryParams" :inline="true" label-width="68px">
            <el-form-item label="所属部门" prop="deptId">
                <el-select
                        v-model="queryParams.deptId"
                        placeholder="请选择部门"
                        clearable
                        size="small"
                        style="width:240px">
                    <el-option
                            v-for="dict in deptOptions"
                            :key="dict.deptId"
                            :label="dict.deptName"
                            :value="dict.deptId"/>
                </el-select>
            </el-form-item>
            <el-form-item label="用户姓名" prop="userName">
                <el-input
                        v-model="queryParams.userName"
                        placeholder="请输入用户姓名"
                        clearable
                        size="small"
                        style="width:240px"/>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input
                        v-model="queryParams.phone"
                        placeholder="请输入手机号"
                        clearable
                        size="small"
                        style="width:240px"/>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select
                        v-model="queryParams.status"
                        placeholder="可用状态"
                        clearable
                        size="small"
                        style="width:240px">
                    <el-option
                            v-for="dict in statusOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"/>
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker
                        v-model="dateRange"
                        size="small"
                        style="width:240px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholde="开始日期"
                        end-placeholde="结束日期"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!--条件查询结束-->


        <!-- 表格工具按钮开始 -->
        <el-row :gutter="10" style="margin-bottom: 8px;">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">
                    修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">
                    批量删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleResetPwd">
                    重置密码
                </el-button>
            </el-col>
        </el-row>
        <!-- 表格工具按钮结束 -->
        <!-- 数据表格开始 -->
        <el-table v-loading="loading" border :data="userTableList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="邮箱：">
                            <span>{{ props.row.email }}</span>
                        </el-form-item>
                        <el-form-item label="擅长：">
                            <span>{{ props.row.strong }}</span>
                        </el-form-item>
                        <el-form-item label="荣耀：">
                            <span>{{ props.row.honor }}</span>
                        </el-form-item>
                        <el-form-item label="简介：">
                            <span>{{ props.row.introduction }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="用户ID" align="center" prop="userId"/>
            <el-table-column label="用户姓名" align="center" prop="userName"/>
            <el-table-column label="部门" align="center" prop="deptId" :formatter="deptFormatter"/>
            <el-table-column label="手机号码【登陆身份】" width="180" align="center" prop="phone"/>
            <el-table-column label="性别" align="center" prop="sex" :formatter="sexFormatter"/>
            <el-table-column label="年龄" align="center" prop="age"/>
            <el-table-column label="是否排班" align="center" prop="schedulingFlag"
                             :formatter="schedulingFlagFormatter"/>
            <el-table-column label="级别" prop="userRank" align="center" :formatter="userRankFormatter"/>
            <el-table-column label="背景" prop="background" align="center" :formatter="backgroundFormatter"/>
            <el-table-column label="状态" prop="status" align="center" :formatter="statusFormatter"/>
            <el-table-column label="创建时间" align="center" prop="createTime" width="200"/>
            <el-table-column label="操作" align="center" width="250">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)">修改
                    </el-button>
                    <el-button v-if="scope.row.userId!=1" type="text" icon="el-icon-delete" size="mini"
                               @click="handleDelete(scope.row)">删除
                    </el-button>
                    <el-button v-if="scope.row.userId!=1" type="text" icon="el-icon-thumb" size="mini"
                               @click="handleSelectRole(scope.row)">分配角色
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 数据表格结束 -->
        <!-- 分页控件开始 -->
        <el-pagination
                v-show="queryParams.total>0"
                :current="queryParams.current"
                :page-sizes="[5, 10, 20, 30]"
                :pageSize="queryParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryParams.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <!-- 分页控件结束 -->
        <!-- 添加弹出层开始 -->
        <el-dialog
                :title="title"
                :visible.sync="addopen"
                width="800px"
                center
                append-to-body
        >
            <el-form ref="addform" :model="addform" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="userName">
                            <el-input v-model="addform.userName" style="width:240px" placeholder="请输入用户名称"
                                      clearable
                                      size="small"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="addform.phone" style="width:240px"
                                      placeholder="请输入手机号，作为登陆凭证"
                                      clearable size="small"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属科室" prop="deptId">
                            <el-select
                                    v-model="addform.deptId"
                                    placeholder="所属科室"
                                    clearable
                                    size="small"
                                    style="width:240px"
                            >
                                <el-option
                                        v-for="d in deptOptions"
                                        :key="d.deptId"
                                        :label="d.deptName"
                                        :value="d.deptId"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="级别" prop="userRank">
                            <el-select
                                    v-model="addform.userRank"
                                    placeholder="用户级别"
                                    clearable
                                    size="small"
                                    style="width:240px"
                            >
                                <el-option
                                        v-for="d in lavelOptions"
                                        :key="d.dictValue"
                                        :label="d.dictLabel"
                                        :value="d.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="年龄" prop="age">
                            <el-input-number v-model="addform.age" clearable size="small"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="背景" prop="background">
                            <el-select
                                    v-model="addform.background"
                                    placeholder="学历"
                                    clearable
                                    size="small"
                                    style="width:240px"
                            >
                                <el-option
                                        v-for="d in backGroudOptions"
                                        :key="d.dictValue"
                                        :label="d.dictLabel"
                                        :value="d.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="addform.sex">
                                <el-radio
                                        v-for="d in sexOptions"
                                        :key="d.dictValue"
                                        :label="d.dictValue"
                                        :value="d.dictValue"
                                >{{ d.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="addform.status">
                                <el-radio
                                        v-for="dict in statusOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                        :value="dict.dictValue"
                                >{{ dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="是否参与排班" prop="schedulingFlag">
                            <el-radio-group v-model="addform.schedulingFlag">
                                <el-radio
                                        v-for="d in schedulingFlagOptions"
                                        :key="d.dictValue"
                                        :label="d.dictValue"
                                        :value="d.dictValue"
                                >{{ d.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="addform.email" style="width:240px" placeholder="请输入用户邮箱" clearable
                                      size="small"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="擅长" prop="strong">
                            <el-input v-model="addform.strong" type="textarea" placeholder="请输入用户擅长"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="荣誉" prop="honor">
                            <el-input v-model="addform.honor" type="textarea" placeholder="请输入用户相关荣誉"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="简介" prop="introduction">
                            <el-input v-model="addform.introduction" type="textarea" placeholder="请输入用户简介"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addhandleSubmit()">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
        </el-dialog>
        <!-- 添加弹出层结束 -->


        <!-- 修改弹出层开始 -->
        <el-dialog
                :title="title"
                :visible.sync="updateopen"
                width="800px"
                center
                append-to-body
        >
            <el-form ref="updateform" :model="updateform" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="userName">
                            <el-input v-model="updateform.userName" style="width:240px" placeholder="请输入用户名称"
                                      clearable
                                      size="small"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="updateform.phone" style="width:240px"
                                      placeholder="请输入手机号，作为登陆凭证"
                                      clearable size="small"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属科室" prop="deptId">
                            <el-select
                                    v-model="updateform.deptId"
                                    placeholder="所属科室"
                                    clearable
                                    size="small"
                                    style="width:240px"
                            >
                                <el-option
                                        v-for="d in deptOptions"
                                        :key="d.deptId"
                                        :label="d.deptName"
                                        :value="d.deptId"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="级别" prop="userRank">
                            <el-select
                                    v-model="updateform.userRank"
                                    placeholder="用户级别"
                                    clearable
                                    size="small"
                                    style="width:240px"
                            >
                                <el-option
                                        v-for="d in lavelOptions"
                                        :key="d.dictValue"
                                        :label="d.dictLabel"
                                        :value="d.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="年龄" prop="age">
                            <el-input-number v-model="updateform.age" clearable size="small"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="背景" prop="background">
                            <el-select
                                    v-model="updateform.background"
                                    placeholder="学历"
                                    clearable
                                    size="small"
                                    style="width:240px"
                            >
                                <el-option
                                        v-for="d in backGroudOptions"
                                        :key="d.dictValue"
                                        :label="d.dictLabel"
                                        :value="d.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="updateform.sex">
                                <el-radio
                                        v-for="d in sexOptions"
                                        :key="d.dictValue"
                                        :label="d.dictValue"
                                        :value="d.dictValue"
                                >{{ d.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="updateform.status">
                                <el-radio
                                        v-for="dict in statusOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                        :value="dict.dictValue"
                                >{{ dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="是否参与排班" prop="schedulingFlag">
                            <el-radio-group v-model="updateform.schedulingFlag">
                                <el-radio
                                        v-for="d in schedulingFlagOptions"
                                        :key="d.dictValue"
                                        :label="d.dictValue"
                                        :value="d.dictValue"
                                >{{ d.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="updateform.email" style="width:240px" placeholder="请输入用户邮箱"
                                      clearable
                                      size="small"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="擅长" prop="strong">
                            <el-input v-model="updateform.strong" type="textarea" placeholder="请输入用户擅长"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="荣誉" prop="honor">
                            <el-input v-model="updateform.honor" type="textarea" placeholder="请输入用户相关荣誉"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="简介" prop="introduction">
                            <el-input v-model="updateform.introduction" type="textarea" placeholder="请输入用户简介"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updatehandleSubmit()">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
        </el-dialog>
        <!-- 修改弹出层结束 -->


        <!-- 分配角色的弹出层开始 -->
        <el-dialog
                :title="title"
                :visible.sync="selectRoleOpen"
                width="900px"
                center
                append-to-body
        >
            <el-table
                    ref="roleListTable"
                    v-loading="loading"
                    border
                    :data="roleTableList"
                    @selection-change="handleRoleTableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column label="角色ID" align="center" prop="roleId"/>
                <el-table-column label="角色名称" align="center" prop="roleName"/>
                <el-table-column label="权限编码" align="center" prop="roleCode"/>
                <el-table-column label="备注" align="center" prop="remark"/>
                <el-table-column label="创建时间" align="center" prop="createTime"/>
            </el-table>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSaveRoleUserSubmit">确 定</el-button>
        <el-button @click="cancelRoleUser">取 消</el-button>
      </span>
        </el-dialog>
        <!-- 分配角色的弹出层结束 -->
    </el-card>
</template>
<script>
import {getAllDeptAPI} from "@/apis/system/dept";
import {getDictDataAPI} from "@/apis/comm/dictData";
import {
    findUserByCondAPI,
    addUser,
    deleteUserByIds,
    getUserById,
    updateUser,
    resetPwd,
    userPhone
} from "@/apis/system/user";
import {selectAllRole, getRoleIdsByUserId, saveRoleUser} from '@/apis/system/role'

export default {
    name: "User",
    data() {
        return {
            //保留手机号
            myPhone:"",
            // 是否启用遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 查询参数
            queryParams: {
                current: 1,
                pageSize: 5,
                total: undefined,
                deptId: undefined,
                userName: undefined,
                phone: undefined,
                status: undefined,
            },
            dateRange: [],
            // 部门列表
            deptOptions: [],
            // 状态列表
            statusOptions: [],
            // 表格数据
            userTableList: [],
            // 级别列表
            lavelOptions: [],
            // 背景列表
            backGroudOptions: [],
            //是否确定排班
            schedulingFlagOptions: [],
            // 性别列表
            sexOptions: [],
            // 日期范围
            // dateRange: [],
            // 是否添加弹出层
            addopen: false,
            // 是否修改弹出层
            updateopen: false,
            // 弹出层标题
            title: '',
            // zengjia表单数据
            addform: {},
            //修改弹出层
            updateform: {},
            // 表单校验
            rules: {
                userName: [
                    {required: true, message: '科室名称不能为空', trigger: 'blur'}
                ],
                deptId: [
                    {required: true, message: '所属科室不能为空', trigger: 'blur'}
                ],
                userRank: [
                    {required: true, message: '级别不能为空', trigger: 'blur'}
                ],
                // age: [
                //     {required: true, message: '年龄不能为空', trigger: 'blur'}
                // ],
                background: [
                    {required: true, message: '学历不能为空', trigger: 'blur'}
                ],
                email: [
                    {required: true, message: '邮箱不能为空', trigger: 'blur'}
                ],
                phone: [
                    {required: true, message: '手机号不能为空', trigger: 'blur'},
                    {pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'},
                    {
                        // 自定义校验逻辑
                        // value：当前输入的值
                        // callback：校验处理函数  校验通过调用
                        validator: (rule, value, callback) => {
                            if (value != null) {
                               if(this.myPhone!=="" && value===this.myPhone){
                                   callback()
                               }
                                userPhone(value).then(res => {
                                    if (res.code === 200) {
                                        callback()
                                    } else if (res.code === 208) {
                                        callback(new Error('手机号重复，请重新输入！'))
                                    }
                                }).catch(err => {
                                    callback()
                                })
                            } else {
                                callback()
                            }
                        }, trigger: 'blur'
                    }]
            },
            // 是否显示分配权限的弹出层
            selectRoleOpen: false,
            // roleIds 分配角色列表选择状态
            roleIds: [],
            // 角色数据
            roleTableList: [],
            // 当前选中的用户
            currentUserId: undefined
        }
    },
    created() {
        this.init();
    },
    methods: {
        /*分配角色*/
        handleSelectRole(row) {
            this.selectRoleOpen = true
            this.title = '---分配角色---'
            this.currentUserId = row.userId || this.ids[0]
            const tx = this
            selectAllRole().then(res => {
                tx.roleTableList = res.data
                this.$nextTick(() => {
                    // 根据当前用户查找之前拥有的角色IDS
                  getRoleIdsByUserId(tx.currentUserId).then(res => {
                    // 更安全的数组获取方式
                    const roleIds = Array.isArray(res.data) ? res.data : [];

                    // 使用forEach代替filter（filter需要返回值）
                    roleIds.forEach(r1 => {
                      tx.roleTableList.forEach(r2 => {
                        if (r1.roleId === r2.roleId) {
                          tx.$refs.roleListTable.toggleRowSelection(r2, true)
                        }
                      })
                    })
                  })
                })
            })
        },

        // 数据表格的多选择框选择时触发
        handleRoleTableSelectionChange(selection) {
            this.roleIds = selection.map(item => item.roleId)
        },
        // 保存用户和角色之间的关系
        handleSaveRoleUserSubmit() {
            saveRoleUser(this.currentUserId, this.roleIds).then(res => {
                this.msgSuccess('分配成功')
                location.reload()
                this.selectRoleOpen = false
            }).catch(function () {
                // this.selectRoleOpen = false
                this.msgError('分配失败')
            })
        },
        // 打开修改的弹出层
        handleUpdate(row) {
            this.title = '---修改用户信息---'
            const userId = row.userId || this.ids
            // this.userId = row.userId || this.ids
            // const dictId = row.dictId === undefined ? this.ids[0] : row.dictId
            this.updateopen = true
            this.reset()
            // 根据dictId查询一个字典信息
            this.loading = true
            getUserById(userId).then(res => {
                console.log(res.data)
                this.updateform = res.data
                this.myPhone=res.data.phone
                this.loading = false
            })
        },
        // 重置密码
        handleResetPwd() {
            const userIds = this.ids
            const tx = this
            tx.$confirm('是否确认重置用户ID为:' + userIds + '的密码?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(function () {
                resetPwd(userIds).then(res => {
                    tx.msgSuccess('重置成功')
                }).catch(function () {
                    tx.msgSuccess('重置失败')
                })
            }).catch(function () {
                tx.msgError('重置已取消')
            })
        },
        // 分页pageSize变化时触发
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.init()
        },
        // 点击上一页  下一页，跳转到哪一页面时触发
        handleCurrentChange(val) {
            this.queryParams.current = val
            this.init()
        },
        init() {
            /*获取表格列表*/
            findUserByCondAPI(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
                this.userTableList = res.data.records;
                this.queryParams.total = res.data.total
            })
            /*获取部门信息*/
            getAllDeptAPI().then(res => {
                this.deptOptions = res.data;
            })
            /*获取状态列表*/
            getDictDataAPI("sys_normal_disable").then(res => {
                this.statusOptions = res.data;
            })
            /*获取性别列表*/
            getDictDataAPI("sys_user_sex").then(res => {
                this.sexOptions = res.data;
            })
            /*获取级别列表*/
            getDictDataAPI("sys_user_level").then(res => {
                this.lavelOptions = res.data;
            })
            /*获取背景列表*/
            getDictDataAPI("sys_user_background").then(res => {
                this.backGroudOptions = res.data;
            })

            /*获取排班列表*/
            getDictDataAPI("his_scheduling_status").then(res => {
                this.schedulingFlagOptions = res.data;
            })
        },
        /*查询按钮*/
        handleQuery() {
            /*获取表格列表*/
            this.queryParams.current = 1;
            findUserByCondAPI(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
                this.userTableList = res.data.records;
                this.queryParams.total = res.data.total
            })
        },
        /*重置按钮*/
        resetQuery() {
            this.resetForm('queryParams')
            this.dateRange = []
            this.init()
        },
        /*表格多选框选择是触发*/
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.userId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /*执行删除*/
        handleDelete(row) {
            const userIds = row.userId || this.ids
            this.$confirm('此操作将永久删除该用户数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true
                deleteUserByIds(userIds).then(res => {
                    this.loading = false
                    this.msgSuccess('删除成功')
                    this.queryParams.current = 1;
                    this.init()// 全查询
                }).catch(() => {
                    this.msgError('删除失败')
                    this.loading = false
                })
            }).catch(() => {
                this.msgError('删除已取消')
                this.loading = false
            })
        },

        cancelRoleUser() {
            this.selectRoleOpen = false
        },
        // 翻译状态
        statusFormatter(row) {
            return this.selectDictLabel(this.statusOptions, row.status)
        },
        // 翻译性别
        sexFormatter(row) {
            return this.selectDictLabel(this.sexOptions, row.sex)
        },
        // 翻译排班状态
        schedulingFlagFormatter(row) {
            return this.selectDictLabel(this.schedulingFlagOptions, row.schedulingFlag)
        },
        // 翻译用户级别
        userRankFormatter(row) {
            return this.selectDictLabel(this.lavelOptions, row.userRank)
        },
        // 翻译用户背景
        backgroundFormatter(row) {
            return this.selectDictLabel(this.backGroudOptions, row.background)
        },
        // 翻译部门
        deptFormatter(row) {
            let deptName = ''
            this.deptOptions.filter(item => {
                if (parseInt(item.deptId) === parseInt(row.deptId)) {
                    deptName = item.deptName
                }
            })
            return deptName
        },
        // 打开添加的弹出层
        handleAdd() {
            this.addopen = true
            this.reset()
            this.title = '---添加用户---'
        },
        //添加
        addhandleSubmit() {
            this.$refs['addform'].validate((valid) => {
                this.loading = true
              console.log(this.addform)
                // valid: 所有表单通过校验  才为true
                if (valid) {
                    addUser(this.addform).then(res => {
                        this.msgSuccess('---添加成功---')
                        this.init()
                        this.addopen = false// 关闭弹出层
                        this.loading = false
                    })
                }
            })
        },
        //修改
        updatehandleSubmit() {
            this.$refs['updateform'].validate((valid) => {
                this.loading = true
                // valid: 所有表单通过校验  才为true
                if (valid) {
                    updateUser(this.updateform).then(res => {
                        this.msgSuccess('---修改成功---')
                        this.myPhone="";
                        this.init()
                        this.updateopen = false// 关闭弹出层
                        this.loading = false
                    })
                }
            })
        },
        // 取消
        cancel() {
            this.addopen = false
            this.updateopen = false
            this.title = '操作已取消'
        }
        ,
        // 重置表单
        reset() {
            this.resetForm('addform')
            this.addform = {
                userId: undefined,
                userName: undefined,
                phone: undefined,
                sex: '0',
                age: 0,
                status: '0',
                email: undefined,
                strong: undefined,
                honor: undefined,
                introduction: undefined,
                remark: undefined,
                schedulingFlag: '0'
            }
        }
        ,

    }
}
</script>

<style scoped>
.demo-table-expand {
    font-weight: bold;
    margin-left: 20px;
    font-size: 0;
}

.demo-table-expand label {

    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
